<!--  -->
<template>
<div class='home-index'  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
    <!-- 顶部背景色 -->
    <div class="top-bg" :style="bgStyle" v-if="bgFlage"></div>
    <div class="bg" v-else></div>
    <div class="swiper-box">
        <mt-swipe :auto="4000" @change="handleChange">
            <mt-swipe-item v-for="value in swiperData" :key="value.id">
            <img :src="value.pic" alt>
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <!-- 金刚区 -->
    <div class="home-sort-page">
        <!-- :auto关闭自动切换 -->
        <mt-swipe :auto="0" @change="handleChange">
            <mt-swipe-item v-for="(value,index) in homeNavDatas" :key="index">
                <ul>
                    <li v-for="perPage in value" :key="perPage.id">
                    <img :src="perPage.pic" alt="">
                    <span>{{perPage.title}}</span>
                    </li>
                </ul>
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <!-- 商城热点 -->
    <div class="home-index-news">
        <div class="news">
            <div class="hot-icon">
                <img :src='imgUrl' alt="">
            </div>
            <ul class="news-list" :class="{trans:flag}" ref='newslist'>
                <li v-for="(value,index) in newsListDatas" :key="index">{{value.title}}</li>
            </ul>
            <i class="iconfont icon-youjiantou_huaban"></i>
        </div>
    </div>
    <!-- 开学季 -->
    <div class="ad">
        <img src="../../../../assets/webp (11).png">
    </div>
    <!-- 秒杀 -->
    <skill-page></skill-page>
    <shop-list :tabShow = 'tabShow' :flag = 'true' :tabsData="tabsData" @changetab='gainTabData' :homeList="homeList"></shop-list>
    
</div>
</template>
<!-- rgb(228, 49, 36)  红的 -->
<!-- rgb(60, 129, 255)  蓝色 -->
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import  homeNavDatas  from '@/mock/homeQuicKNav'
import imgUrl from '@/assets/177_P_1597978466633.png'
import skillPage from './skill.vue'
import shopList from './list'
import { homeListApi } from '@/api/home'
console.log(homeNavDatas)
export default {
//import引入的组件需要注入到对象中才能使用
components: {skillPage,shopList},
// 60 129 255
data() {
//这里存放数据
return {
    tabShow:true,
    swiperData:[
         {
        id:'2',
        pic:'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg'
    },
        {
        id:'1',
        pic:'https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg'
    }
   
    
    ],
    bgArr:[
        {background:'rgb(228, 49, 36)'},
         {background:'rgb(60, 129, 255)'}
    ],
    bgStyle:{background:'rgb(228, 49, 36)'},
    bgFlage:true,
    homeNavDatas:homeNavDatas.homeNavDatas,
    imgUrl:imgUrl,
    newsListDatas:[
        {id:1,
        title:'新闻1'
        },
         {id:2,
        title:'新闻2'
        },
         {id:3,
        title:'新闻3'
        },
         {id:4,
        title:'新闻4'
        }
    ],
    timer:'',
    flag:false,
     tabsData:[
        {
            id:4,
            title:'精选',
            desc:'为你推荐',
            type:'is_best'
       },
       {
            id:5,
            title:'社区',
            desc:'新奇好物'
       },
       {
            id:6,
            title:'新品',
            desc:'潮流上新',
            type:'is_new'
       },
       {
            id:4,
            title:'热卖',
            desc:'火热爆款',
            type:'is_hot'
       }
    ],
    page:1,
    size:10,
    type:'is_best',
    homeList:[],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    handleChange(index){
        // console.log('index',index);
        this.bgStyle = this.bgArr[index]
    },
    // 监听滚动
    scroolPage(){
        let topl = document.documentElement.scrollTop;
        // console.log(topl)
        if(topl>80){
            this.bgFlage = false
        }else{
            this.bgFlage = true
        }
    },
    // 上下滚动
    scrollNews(){
        let ulDom = this.$refs.newslist;
        ulDom.style.top = '-5rem'
        this.flag = !this.flag
        setTimeout(()=>{
            this.newsListDatas.push(this.newsListDatas[0]);
            this.newsListDatas.shift();
             ulDom.style.top = '0'
             this.flag = !this.flag
        },500)
    },
    // 获取商品列表数据
    shopListData(){
        homeListApi({
            page:this.page,
            size:this.size,
            type:this.type
        }).then(res=>{
          console.log('res',res)
          this.homeList = this.homeList.concat(res.data.data)
    })
    },
    // 获取tab页签传递过来的数据
    gainTabData(data){
        console.log('data',data)
        this.type = data.type;
        this.page = 1;
        this.homeList=[];
        this.shopListData()
    },
    // 上拉加载
    loadMore() {
        console.log('触底了嘛')
        this.page++;
        this.shopListData()
    }
    
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    // 添加监听事件
    window.addEventListener('scroll',this.scroolPage)
  this.timer= setInterval(this.scrollNews,1000)
  this.shopListData()
  
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {
    clearInterval(this.timer)
    // 解绑事件
    window.removeEventListener('scroll',this.scroolPage)
}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="less">
    .home-index{
        .top-bg{
            height: 14rem;
            width:100%;
            background-color: rgb(228, 49, 36);
            border-bottom-left-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
        }
        .bg{
            height: 9rem;
            width:100%;
            background-color: rgb(228, 49, 36);
            position: fixed;
            top: 0;
            left:0;
            z-index:99
        }
        .swiper-box{
            // width: 100%;
            // css中的函数，注意使用的时候左右必须间隙
            width:calc(100%-2rem);
            margin: -4rem 1rem 0;
            height: 12rem;
            border-radius: 1rem;
            img{
                width: 100%;
                height: 12rem;
                border-radius: 1rem;
            }
        }
        .home-sort-page{
           width: calc(100%-2rem);
           margin:1rem 1rem 0 1rem;
           height: 20rem;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            background: #fff;
            .mint-swipe{
                .mint-swipe-indicators{
                    .mint-swipe-indicator{
                        background: #ff0000;
                        opacity: 0.2;
                        margin: 0 0px;
                        border-radius: 0;
                        width:1.4rem;
                        height: 0.4rem;
                    }
                    .mint-swipe-indicator.is-active{
                        opacity: 1;
                    }
                }
            }
            ul{
                height: 18rem;
                display: flex;
                justify-content: center;
                align-content: center;
                flex-wrap: wrap;
                li{
                    width:20%;
                    height: 9rem;
                    text-align: center;
                }
                img{
                    width: 7rem;
                    height: 7rem;
                }
            }
        }
        .home-index-news{
            width:calc(100%-2rem);
            margin:0 1rem;
            height: 5rem;
            background: #fff;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
            border-top: 1px solid #eee;
            .news{
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                overflow: hidden;
                height: 5rem;
                position: relative;
                img{
                    width:7rem;
                    height:3rem
                }
                .news-list{
                    position: absolute;
                    top:0;
                    flex: 1;
                    left:8.5rem;
                    li{
                        font-size: 1.4rem;
                        line-height: 5rem;
                    }
                }
                .trans{
                    transition: all 0.5s linear;
                }
            }
        }
        .ad{
            width:calc(100%-2rem);
            margin:1rem;
            img{
                width:100%
            }
        }
    }
</style>